<template>
  <div class="site">
    <!--顶部导航-->
    <Nav :blogName="siteInfo.blogName" :categoryList="categoryList"/>
    <!--首页大图 只在首页且pc端时显示-->
    <div class="m-mobile-hide">
      <Header v-if="route.name==='home'" :blogName="siteInfo.blogName"/>
    </div>

    <div class="main">
      <div class="m-padded-tb-big">
        <div class="ui container">
          <div class="ui stackable grid">
            <!--左侧-->
            <div class="three wide column m-mobile-hide">
              <Introduction :class="{'m-display-none':focusMode}"/>
            </div>
            <!--中间-->
            <div class="ten wide column">
              <router-view v-slot="{ Component }">
                <keep-alive include="Home">
                  <component :is="Component"/>
                </keep-alive>
              </router-view>
            </div>
            <!--右侧-->
            <div class="three wide column m-mobile-hide">
              <RandomBlog :randomBlogList="randomBlogList" :class="{'m-display-none':focusMode}"/>
              <Tags :tagList="tagList" :class="{'m-display-none':focusMode}"/>
              <!--只在文章页面显示目录-->
              <Tocbot v-if="route.name==='blog'"/>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--私密文章密码对话框-->
    <BlogPasswordDialog/>

    <!--APlayer-->
    <div class="m-mobile-hide">
      <MyAPlayer/>
    </div>
    <!--回到顶部-->
    <el-backtop style="box-shadow: none;background: none;">
      <img src="/img/paper-plane.png" style="width: 40px;height: 40px;z-index: 999999;" alt="">
    </el-backtop>
    <!--底部footer-->
    <Footer :siteInfo="siteInfo" :badges="badges" :newBlogList="newBlogList" :hitokoto="hitokoto"/>
  </div>
</template>

<script setup>
import {getHitokoto, getSite} from '@/api'
import Nav from "@/components/index/Nav.vue";
import Header from "@/components/index/Header.vue";
import Footer from "@/components/index/Footer.vue";
import Introduction from "@/components/sidebar/Introduction.vue";
import Tags from "@/components/sidebar/Tags.vue";
import RandomBlog from "@/components/sidebar/RandomBlog.vue";
import MyAPlayer from "@/components/index/MyAPlayer.vue";
import Tocbot from "@/components/sidebar/Tocbot.vue";
import BlogPasswordDialog from "@/components/index/BlogPasswordDialog.vue";
import {SAVE_CLIENT_SIZE, SAVE_INTRODUCTION, SAVE_SITE_INFO, RESTORE_COMMENT_FORM} from "@/store/mutations-types";
import {getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
import {useState} from "@/util/useState";
import {useRoute} from "vue-router";
import {useStore} from "vuex";

const siteInfo = ref({blogName: ''})
const categoryList = ref([])
const tagList = ref([])
const randomBlogList = ref([])
const badges = ref([])
const newBlogList = ref([])
const hitokoto = ref({})
const {focusMode} = useState(['focusMode'])
const route = useRoute()

function getSiteInfo() {
  getSite().then(res => {
    if (res.code === 200) {
      siteInfo.value = res.data.siteInfo
      badges.value = res.data.badges
      newBlogList.value = res.data.newBlogList
      categoryList.value = res.data.categoryList
      tagList.value = res.data.tagList
      randomBlogList.value = res.data.randomBlogList
      store.commit(SAVE_SITE_INFO, siteInfo.value)
      store.commit(SAVE_INTRODUCTION, res.data.introduction)
      document.title = route.meta.title + siteInfo.value.webTitleSuffix

    }
  })
}

getSiteInfo()

//获取一言
function getHitokotoInfo() {
  getHitokoto().then(res => {
    hitokoto.value = res
  })
}

getHitokotoInfo()

const store = useStore()
//从localStorage恢复之前的评论信息
store.commit(RESTORE_COMMENT_FORM)

//路由改变时，页面滚动至顶部
const {proxy} = getCurrentInstance()
watch(() => route.path, () => {
  proxy.scrollToTop()
})

onMounted(() => {
  //保存可视窗口大小
  store.commit(SAVE_CLIENT_SIZE, {
    clientHeight: document.body.clientHeight,
    clientWidth: document.body.clientWidth
  })
  window.onresize = () => {
    store.commit(SAVE_CLIENT_SIZE, {
      clientHeight: document.body.clientHeight,
      clientWidth: document.body.clientWidth
    })
  }
})
</script>

<style scoped>
.site {
  display: flex;
  min-height: 100vh; /* 没有元素时，也把页面撑开至100% */
  flex-direction: column;
}

.main {
  margin-top: 40px;
  flex: 1;
}

.main .ui.container {
  width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ui.grid .three.column {
  padding: 0;
}

.ui.grid .ten.column {
  padding-top: 0;
}

.m-display-none {
  display: none !important;
}

.m-display-none {
  display: none !important;
}
</style>
